// 不更改主题的话，使用这一句话就行了
// @use 'element-plus/dist/index.css' as *

// 下边为更改主题
// styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      // 'base': #ef610f,
      'base': #9197f4,
    ),
    'danger': (
      'base': #880000,
    )
  ),
  $header: (
    'padding': 0 10px,
    'height': 48px
  ),
  $main: (
    'padding': 0
  ),
  $menu: (
    'base-level-padding': 10px,
    'level-padding': 10px
  )
);

// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
/* 
  您应该使用 @use 'xxx.scss' as *; 代替 @import 'xxx.scss';。
  因为 sass 团队说他们最终会删除 @import 语法。
*/
@use "element-plus/theme-chalk/src/index.scss" as *;

// 2. 按需引入使用 scss.additionalData

// 3. 通过 CSS 变量设置
/* 
:root {
  --el-color-primary: green;
}
最好式写个样式
<el-tag style="--el-tag-bg-color: red; color: var(--el-tag-bg-color)">Tag</el-tag>
.custom-class {
  --el-tag-bg-color: red;
  color: var(--el-tag-bg-color)
}
*/

// 4. 通过js控制css变量
/* 
// document.documentElement 是全局变量时
const el = document.documentElement
// const el = document.getElementById('xxx')

// 获取 css 变量
getComputedStyle(el).getPropertyValue(`--el-color-primary`)

// 设置 css 变量
el.style.setProperty('--el-color-primary', 'red')
*/

// ...如果你想要更优雅的方式，请看这里。 useCssVar | VueUse [https://vueuse.org/core/useCssVar/]